<template>
	<view>
		<view class="navbar-bg"></view>
		<view class="userinfo" @click="route">
			<view class="info flex align-center justify-between" style="width: 100%;">
				<view class="flex align-center">
					<u-avatar :src="userInfo.avatar" size="92rpx"></u-avatar>
					<view class="u-m-l-20">
						<view class="u-font-32" style="color: #181919;">{{userInfo.nikeName}}</view>
						<view class="u-m-t-10" style="color: #888888;">+86 {{userInfo.phone}}</view>
					</view>
				</view>
				<u-icon name="arrow-right" size="18"></u-icon>
			</view>
		</view>

		<!-- <view class="flex align-center justify-between u-m-l-32 u-m-r-32 u-m-t-20 card-lg">
			<view @click="$u.route('/pages/personal/coupon/coupon')" class="flex align-center">
				<u-icon name="/static/personal/p-yhj.png" size="76rpx"></u-icon>
				<view class="u-m-l-22">
					<view>
						<text class="text-bold text-black u-font-36">0</text>
						<text class="u-font-24">/张</text>
					</view>
					<view class="u-font-xs text999">优惠券</view>
				</view>
			</view>
			<view class="btn">领取优惠券</view>
		</view> -->

		<view class="flex align-center justify-between u-m-l-32 u-m-r-32 u-m-t-20">
			<view @click="$u.route('/pages/personal/integral/integral?userAccountId='+userAccount.id)"
				class="card flex align-center">
				<u-icon name="/static/personal/p-xyk.png" size="76rpx"></u-icon>
				<view class="u-m-l-22">
					<view>
						<text class="u-font-24">￥</text>
						<text
							class="text-bold text-black u-font-36">{{parseFloat(userAccount.account).toFixed(2)}}</text>
					</view>
					<view class="u-font-xs text999">{{userAccount.accountName}}</view>
				</view>
				<view @click="$u.route('/pages/personal/rechange/index')"
					style="width: 160rpx;height: 60rpx;background-color: #FF5B00;color: aliceblue;line-height: 60rpx;text-align: center;border-radius: 5rpx;margin-left: 300rpx;">
					积分兑换</view>
			</view>
		</view>



		<view class="u-m-l-32 u-m-r-32 u-m-t-20 bg-white cell-group">
			<u-cell-group>
			<!-- 	<u-cell @click="$u.route('/subpkg/bluetooth/print_config')" title="配置蓝牙" :isLink="false">
					<view slot="icon" class="u-m-r-20">
						<u-icon name="/static/personal/cell-wddd.png" size="44rpx"></u-icon>
					</view>
					<view slot="right-icon">
						<u-icon name="arrow-right" size="26rpx"></u-icon>
					</view>
				</u-cell>
				 -->
				<u-cell @click="$u.route('/pages/personal/address/address')" title="我的地址" :isLink="false">
					<view slot="icon" class="u-m-r-20">
						<u-icon name="/static/personal/cell-wddd.png" size="44rpx"></u-icon>
					</view>
					<view slot="right-icon">
						<u-icon name="arrow-right" size="26rpx"></u-icon>
					</view>
				</u-cell>
				<!-- <u-cell title="赔付条款" :isLink="false" @click="$u.route('/pages/personal/service/peifu?id='+'f30b4f86dafb4e40847f5079d73fe87b')">
					<view slot="icon" class="u-m-r-20">
						<u-icon name="/static/personal/feiyong.png" size="44rpx"></u-icon>
					</view>
					<view slot="right-icon">
						<u-icon name="arrow-right" size="26rpx"></u-icon>
					</view>
				</u-cell> -->
				<u-cell title="服务与说明" :isLink="false" @click="$u.route('/pages/personal/service/service?id='+'dfb8af4cec6346d4af15356cf313eba7')">
					<view slot="icon" class="u-m-r-20">
						<u-icon name="/static/personal/cell-fwsm.png" size="44rpx"></u-icon>
					</view>
					<view slot="right-icon">
						<u-icon name="arrow-right" size="26rpx"></u-icon>
					</view>
				</u-cell>
				<u-cell title="客服咨询" :isLink="false" @click="$u.route('/pages/personal/service/kefuzhixun')">
					<view slot="icon" class="u-m-r-20">
						<u-icon name="/static/personal/kefu.png" size="44rpx"></u-icon>
					</view>
					<view slot="right-icon">
						<u-icon name="arrow-right" size="26rpx"></u-icon>
					</view>
				</u-cell>
				<!-- <u-cell title="团券核销" :isLink="false" @click="$u.route('/pages/personal/reservation/reservation')">
					<view slot="icon" class="u-m-r-20">
						<u-icon name="/static/personal/hexiao.png" size="44rpx"></u-icon>
					</view>
					<view slot="right-icon">
						<u-icon name="arrow-right" size="26rpx"></u-icon>
					</view>
				</u-cell> -->
				<u-cell title="店铺管理" :isLink="false" @click="$u.route('/subpkg/store/store')"  v-if="userInfo.type==1">
					<view slot="icon" class="u-m-r-20">
						<u-icon name="/static/personal/tab_shop.png" size="44rpx"></u-icon>
					</view>
					<view slot="right-icon">
						<u-icon name="arrow-right" size="26rpx"></u-icon>
					</view>
				</u-cell>
				
			</u-cell-group>
		</view>

		<login ref="login" @refresh="refresh"></login>
	</view>
</template>

<script>
	import login from '@/components/x-unit/login/login.vue'
	import {
		getUserAccountInfo,
		getUserCouponInfoList,
		getNewsDetails,
		getUserInfo
	} from "@/common/api/api.js"
	export default {
		components: {
			login
		},
		data() {
			return {
				token: '',
				userInfo: '',
				userAccountList: [], // 用户账户列表
				userAccount: {
					account: 0,
					id: '',
					accountName: ''
				},
				userCouponInfoCount: 0, // 用户优惠卷数量


			}
		},
		onLoad() {
			this.handleGetUserAccountInfo();
			this.handleGetUserCouponInfoList();
		},
		onShow() {
			this.refresh();
		},
		methods: {
			route() {
				if (this.token) {
					uni.$u.route('/pages/personal/userInfo/userInfo');
				} else {
					this.$refs.login.open();
				}

			},
			// 获取用户账户信息 积分
			handleGetUserAccountInfo() {
				var params = {
					userInfoId: this.$store.state.$token
				};
				getUserAccountInfo(params).then(res => {
					this.userAccountList = res.data;
					if (res.data.length > 0) {
						this.userAccount = res.data[0];
					}
				})
			},
			// 获取用户未使用的优惠券信息
			handleGetUserCouponInfoList() {
				var params = {
					userInfoId: this.$store.state.$token,
					status: "0",
				};
				getUserCouponInfoList(params).then(res => {
					this.userCouponInfoCount = res.data.total;
				})
			},
			refresh() {
				getUserInfo({
					userInfoId: this.$store.state.$token
				}).then(res=>{
					this.$store.commit('$uStore', {
						name: '$userInfo',
						value: res.data
					});
					this.token = this.$store.state.$token;
					this.userInfo = this.$store.state.$userInfo;
				})
				
			}
		},
		onPullDownRefresh() {
			this.handleGetUserAccountInfo();
			this.handleGetUserCouponInfoList();
			uni.hideLoading();
		}
	}
</script>
<style>
	>>>.u-cell__body {
		padding: 40rpx 0rpx !important;
	}

	button {
		padding: 0;
		margin: 0;
		background-color: #fff;
		text-align: left;
	}

	button::after {
		border: none;
	}
</style>
<style lang="scss">
	.navbar-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: -1;
		width: 750rpx;
		height: 316rpx;
		//background: linear-gradient(90deg, #C8CDFF 0%, #CBFFFA 54%, #FF5B00 100%);
		background: linear-gradient(90deg, #ffaa7f 10%, #ffaa7f 54%, #FF8B4A 100%);
		backdrop-filter: blur(50rpx);
	}

	.userinfo {
		position: relative;
		height: 316rpx;
		width: 100%;

		.info {
			position: absolute;
			bottom: 0;
			z-index: 99;
			padding-left: 32rpx;
			padding-right: 32rpx;
			padding-bottom: 20rpx;
		}
	}

	.card {
		width: 100%;
		height: 164rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		padding-left: 20rpx;
		padding-top: 44rpx;
		padding-bottom: 44rpx;
	}

	.card-lg {
		height: 164rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		padding-left: 20rpx;
		padding-top: 44rpx;
		padding-bottom: 44rpx;
	}

	.cell-group {
		padding: 0 32rpx;
		border-radius: 16rpx;
	}

	.btn {
		width: 144rpx;
		height: 56rpx;
		line-height: 56rpx;
		background: #FCBB2B;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-right: 20rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		text-align: center;
	}
</style>